import React from 'react';
import { View, Image } from '@tarojs/components'
import { gotoPage } from '../../../utils/tools'
import './main-menu.scss'

interface NavItem {
    icon: string
    url: string
    name: string
}

const CustomMenu: React.FC<{data: NavItem[]}> = (props) => {
    return (
      <View className={(props.data.length >=0 && props.data.length <=5)?"main-menu-flex":"main-menu"}>
        {props.data.length > 0 && props.data.map((item, index) => <View key={index} className='item' onClick={() => gotoPage(item.url)}>
            <View className='img'><Image src={item.icon} mode='aspectFit' style='width:100%;height:100%' /></View>
            <View className='title'>{item.name}</View>
        </View>)}
      </View>
    )
}

CustomMenu.defaultProps = {
    data: []
}

export default CustomMenu
